<template>
  <div id="search">
    <SearchBar />
    <div
      v-show="searchStore.isFliterActive"
      :class="{ active: isActive && searchStore.isFliterActive }"
      class="filter"
    >
      <FlterList />
    </div>
    <main ref="searchMain" class="search-main">
      <SearchAnimeBox />
    </main>
  </div>
</template>

<script>
import SearchBar from './components/SearchBar.vue'
import FlterList from './components/FlterList.vue'
import SearchAnimeBox from './components/SearchAnimeBox.vue'

import { ref, onActivated, watch } from 'vue'

import { useSearchStore } from '../../stores/search'
import { ListenerScroll } from '@/hook/scroll'

export default {
  name: 'Search',
  components: {
    SearchBar,
    FlterList,
    SearchAnimeBox
  },
  setup() {
    // const y = ref(null)
    const searchMain = ref(null)
    const searchStore = useSearchStore()
    const isActive = ref('')

    watch(searchStore, () => {
      if (isActive.value === searchStore.isFliterActive) return
      isActive.value = searchStore.isFliterActive
    })
    const watchOver = watch(isActive, (newValue, oldValue) => {
      if (oldValue === '') {
        isActive.value = false
        watchOver()
      }
    })

    onActivated(() => {
      isActive.value = ''
      ListenerScroll(searchMain, () => {
        if (searchMain.value.scrollTop > 300) {
          searchStore.isFliterActive = false
        }
      })
    })

    return {
      searchMain,
      searchStore,
      isActive
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~style/anime.scss';
$left_radius: 24px;
#search {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  height: 100%;
  .filter {
    width: 100%;
    border-radius: $left_radius 0 0 $left_radius;
    background-color: $box_bg;
    overflow: hidden;
  }
  .active {
    opacity: 0;
    animation: fade-in 0.625s forwards;
  }
  .search-main {
    flex: 1;
    width: 100%;
    background-color: $box_bg;
    overflow: hidden;
    border-top-left-radius: $left_radius;
    transition: all 0.5s;
    overflow-y: auto;
  }
}
</style>
